<style scoped>
    .my-th{
      width:10vw;
      padding-left:10px;
    }

    .my-td{
      width:15vw;
      padding-left:10px;
    }
</style>
<template>
    <div style="background-color: #ffffff;padding: 20px 50px;">
        <table border="1px" class="tale" align="center" style="width:100%;">
            <tr align="center" style="height: 3vw">
                <th class="my-th">用户账号</th>
                <td class="my-td">{{ row.user_number }}</td>
                <th class="my-th">用户名称</th>
                <td class="my-td">{{ row.user_name }}</td>
                <th class="my-th">身份证号</th>
                <td class="my-td">{{ row.id_card }}</td>
            </tr>
            <tr align="center" style="height: 3vw">
                <th class="my-th">电话号码</th>
                <td class="my-td">{{ row.phone }}</td>
                <th class="my-th">个人邮箱</th>
                <td class="my-td">{{ row.email }}</td>
                <th class="my-th">4A账号</th>
                <td class="my-td">{{ row.fourA }}</td>
            </tr>
            <tr align="center" style="height: 3vw">
                <th class="my-th">生效时间</th>
                <td class="my-td">{{ formatDate(row.effect_date) }}</td>
                <th class="my-th">失效时间</th>
                <td class="my-td">{{ formatDate(row.expire_date) }}</td>
                <th class="my-th">账号状态</th>
                <td class="my-td">
                    <span v-if="row.status==='1'">正常</span>
                    <span v-if="row.status==='0'">加锁</span>
                </td>
            </tr>
            <tr align="center" style="height: 3vw">
                <th class="my-th">归属组织</th>
                <td class="my-td">{{ row.org_id_str }}</td>
                <th class="my-th">账号描述</th>
                <td class="my-td">{{ row.des }}</td>
                <th class="my-th">关联的角色</th>
                <td class="my-td">{{ roles }}</td>
            </tr>
            <tr align="center" style="height: 3vw">
                <th class="my-th">关联的租户</th>
                <td colspan="5" class="my-td">{{ tenants }}</td>
            </tr>
            <tr align="center" style="height: 3vw">
                <th class="my-th">关联的项目</th>
                <td colspan="5" class="my-td">
                    <template v-for="(item,index) in row.projects">
                        <span>{{item.project}}</span>
                        <span v-if="index === row.projects.length-1"></span>
                        <span v-else >、</span>
                    </template>
                </td>
            </tr>
            <tr align="center" style="height: 3vw">
                <th class="my-th">关联的组织</th>
                <td colspan="5" class="my-td">
                    <template v-for="(item,index) in row.structs">
                        <span>{{item.gName}}</span>
                        <span v-if="index === row.structs.length-1"></span>
                        <span v-else >、</span>
                    </template>
                </td>
            </tr>
        </table>
    </div>
</template>
<script>
    export default {
        methods:{
            formatDate(time){
                return this.utils.formatDate(new Date(time*1000), "yyyy-MM-dd");
            }
        },
        props: {
            row: Object,
            roles:String,
            tenants:String
        }
    };
</script>